<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

<link rel="stylesheet" href="../../jQueryMobile/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="../../css/colnect.css" />
<script type="text/javascript" src="../../js/cordova-2.1.0.js"></script>
<script type="text/javascript" src="../../jQueryMobile/jquery-1.8.2.min.js"/></script>
<script type="text/javascript" src="../../jQueryMobile/jquery.mobile-1.2.0.js"></script>
<script type="text/javascript" src="../../plugins/phonegap-all-collections.js"></script>
<script type="text/javascript">

function onLoad()
{
	document.addEventListener("deviceready", onDeviceReady, true);
}

function onDeviceReady()
{
 	
}

function showLoadingBar(message)
{
	$("body").append('<div class="modalWindow"/>');
	$.mobile.loadingMessageTextVisible = true;
    $.mobile.loadingMessage = message;
    $.mobile.showPageLoadingMsg();
}            

function hideLoadingBar(){
	$(".modalWindow").remove();
	$.mobile.hidePageLoadingMsg();			
}

</script>
</head>
<body onload="onLoad();">

<div data-role="page" data-theme="c" data-content-theme="c">
  <div data-role="header">
  <h1 role="heading" style="font-size:26px;">Colnect</h1>
  <div data-role="content">
  <div class="content-primary" id="inject_ul">
     <label for="select-choice-0" class="select">Search By</label>
		<select name="select-choice-0" id="select-choice-0">
		   <option value="countries">Countries</option>
		   <option value="year">Year</option>
		   <option value="new">New</option>		   
		</select>
		
		<div data-role="fieldcontain">
		    <label for="search-2">Search Input:</label>
		    <input type="search" name="search-2" id="search-2" value="" />
		</div>
		
		<input type="submit" value="Search" />
   </div>
  </div>
</div>
</body>
</html>